<template>
  <div class="all" ref="ActiveYear3">
    <div class="bg" v-if="reportThirdJson">
      <LImage class="img-bg" :src="Config.img('2201_bg.png')"></LImage>
      <div class="allab">
        <LImage class="img-stars" :src="Config.img('2201_stars.png')"></LImage>
      </div>
      <LImage class="img-spot-left" :src="Config.img('2201_left_spot.png')"></LImage>
      <LImage class="img-spot-right" :src="Config.img('2201_right_spot.png')"></LImage>
      <LImage class="img-log" :src="Config.img('2201_page3_logo.png')"></LImage>
      
      <div class="height50"></div>
      <text class="font30 text1">{{'你的操作风格别具一格，'}}</text>
      <text class="font30 text1">{{'喜欢做别人看不懂的行情'}}</text>

      <div class="height40"></div>
      <richtext class="richtext" :style="{'background-color':stylek}">
        <span class="font30 text1">{{'看得出你对'}}</span>
        <span class="font44 text-yellow mb-2">{{reportThirdJson.mostMap.strategyName}}</span>
        <span class="font30 text1">{{'策略情有独钟，'}}</span>
      </richtext>
      <div class="height10"></div>
      <richtext class="richtext" :style="{'background-color':stylek}">
        <span class="font52 text-yellow">{{reportThirdJson.mostMap.count}}</span>
        <span class="font30 text1">{{'次都在使用这个策略'}}</span>
      </richtext>
      <richtext v-if="reportThirdJson.mostMap.realEarnings!=undefined && reportThirdJson.mostMap.realEarnings > 0"
      class="richtext">
        <span class="font30 text1">{{'盈利超过'}}</span>
        <span class="font30 text-yellow">{{'$'}}</span>
        <span class="font52 text-yellow">{{reportThirdJson.mostMap.realEarnings+' ！'}}</span>
      </richtext>

    <template v-if="reportThirdJson.highMap.strategyName">
      <div class="height40"></div>
      <richtext class="richtext" :style="{'background-color':stylek}">
        <span class="font44 text-yellow">{{reportThirdJson.highMap.strategyName}}</span>
        <span class="font30 text1">{{'策略最高一次为你赚取了，'}}</span>
      </richtext>
      <div class="height10"></div>
      <richtext class="richtext" :style="{'background-color':stylek}">
        <span class="font30 text1">{{'超过'}}</span>
        <span class="font52 text-yellow" >{{reportThirdJson.highMap.highRealEarningsRate}}</span>
        <span class="font30 text-yellow">{{'%'}}</span>
        <span class="font30 text1">{{'的收益'}}</span>
      </richtext>
    </template>
      
      <div class="height40"></div>
      <richtext class="richtext" :style="{'background-color':stylek}">
        <span class="font30 text1">{{'这一年您的策略胜率是'}}</span>
        <span class="font52 text-yellow">{{reportThirdJson.winRate}}</span>
        <span class="font30 text-yellow">{{'%'}}</span>
        <span class="font30 text1">{{'，'}}</span>
      </richtext>
      <div class="height10"></div>
      <richtext class="richtext"
      v-if="reportThirdJson.winRate >= 50">
        <span class="font30 text1">{{'全球的用户给你留言'}}</span>
        <span class="font30 text-yellow" >{{'“dddd (带带弟弟)”'}}</span>
      </richtext>
      <richtext v-else class="richtext">
        <span class="font30 text1">{{'全球的用户给你留言'}}</span>
        <span class="font30 text-yellow" >{{'“2022继续加油噢！”'}}</span>
      </richtext>
      
    
      <div class="all"></div>
      <div class="but" @stopPropagation="stopPropagation" @click="otClick"></div>
    </div>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
  .richtext {
    background-color:rgba(0, 0, 0, 0)
  }
  .yinyue {
    position: absolute;
    right: 40;
    top: 40;
    width: 60px;
    height: 60px;
  }
  .text1 {
    color: #E5F3FF;
  }
  .bg {
    overflow: hidden;
    flex: 1;
    padding-left: 70px;
    padding-right: 70px;
  }
  .allab {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
  }
  .img-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .img-stars {
    width: 719px;
    height: 766px;
  }
  .img-spot-left {
    position: absolute;
    bottom: 380;
    left: 10;

    width: 88px;
    height: 93px;
  }
  .img-spot-right {
    position: absolute;
    bottom: 288;
    right: 0;
    
    width: 147px;
    height: 155px;
  }
  .img-log {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 750px;
    height: 606px;
  }

  .img-text {
    width: 296px;
    height: 119px;
    margin-top: 40px;
  }
  .but {
    height: 160px;
  }
  .mb40 {
    margin-bottom: 40px;
  }
  .text-yellow {
    color: #F6CF54;
  }
</style>

<script>

//功能
import jconfig from "@/_js/config"; 
import jmath from "@/_js/math"; 

export default {
  props:{
    data:{
      type:Object,
      default:undefined,
    },
  },

  data() {
    return {
      Config: jconfig,
      data:undefined,
      reportThirdJson:undefined,
    }
  },

  /* reportThirdJson 3
    * 
    *   mostMap 喜欢策略
    *   highMap 最高策略
    *   winRate 胜率
    *   "reportThirdJson":{
            "mostMap":{
                "strategyName":"合约网格",
                "count":12,
                "realEarnings":0
            },
            "highMap":{
                "strategyName":"合约马丁",
                "realEarningsRate":45.61
            },
            "winRate":"0.0571"
        },
    **/
  mounted(){
    var reportThirdJson = this.data.reportThirdJson;
    reportThirdJson.winRate = jmath.cheng(reportThirdJson.winRate, 100, 2, 2);
    this.reportThirdJson = reportThirdJson;
    setTimeout(() => {
      this.stylek = 'rgba(0, 0, 0, 0)';
      this.$forceUpdate();
    }, 1000);
  },

  methods:{
    
    /******************** 手势*/
    stopPropagation(){
      return true;
    },

    /******************** 按钮*/
    //查看
    otClick() {
      this.$emit("ot", this.$refs.ActiveYear3, 4);
    },
  }
}
</script>
